<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="img/logo_mini.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/sweetalert2.min.css" />
    <link rel="stylesheet" href="css/baguetteBox.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Тест</title>
  </head>

  <body>
    <!-- Меню -->
    <div class="menu" style="background-image: url(img/background.jpg)">
      <div class="container">
        <div class="row">
          <div class="logo">
            <a href="index.html">
              <img src="img/logo.png" alt="логотип" />
            </a>
          </div>
          <ul>
            <li><a href="index.html">Главная</a></li>
            <li><a href="catalog.html">Каталог</a></li>
            <li><a href="man.html">Мужское</a></li>
            <li><a href="woman.html">Женское</a></li>
            <li><a href="contacts.html">Контакты</a></li>
          </ul>
          <div class="phone">
            <a href="tel:+78005353555">&#9742; +7 (800) 535-35-55</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Страница одной двери -->
    <div class="door-template">
      <div class="container">
        <div class="row">
          <div class="col-6 col-lg-12">
            <div class="door-gallery">
              <a
                href="img/сatalog/test.jpg"
                data-caption="краткое описание изображения 1"
              >
                <img src="img/сatalog/test.jpg" alt="название 1" />
              </a>
              <a
                href="img/сatalog/test.jpg"
                data-caption="краткое описание изображения 1"
              >
                <img src="img/сatalog/test.jpg" alt="название 1" />
              </a>
              <a
                href="img/сatalog/test.jpg"
                data-caption="краткое описание изображения 1"
              >
                <img src="img/сatalog/test.jpg" alt="название 1" />
              </a>
              <a
                href="img/сatalog/test.jpg"
                data-caption="краткое описание изображения 1"
              >
                <img src="img/сatalog/test.jpg" alt="название 1" />
              </a>
              <a
                href="img/сatalog/test.jpg"
                data-caption="краткое описание изображения 1"
              >
                <img src="img/сatalog/test.jpg" alt="название 1" />
              </a>
            </div>
          </div>
          <div class="col-6 col-lg-12 door-description">
            <h2>Adidas <span>Есть в наличии</span></h2>
            <!-- <h2>Название <span>Под заказ</span></h2> -->
            <p>Какое-то описание</p>
            <h3>57100 &#8381;</h3>
            <form>
              <input type="text" placeholder="Имя" /><br />
              <input type="text" placeholder="Телефон" /><br />
              <textarea placeholder="Комментарий"></textarea><br />
              <button class="btn">Заказать пару</button>
            </form>
            <table>
              <caption>
                Характеристики
              </caption>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
              <tr>
                <td>Ключ</td>
                <td>Значение</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- Футер -->
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <a href="policy.html">Политика конфиденциальности</a>
            <span class="accent-color">&copy; </span> Vibe Style, 2023
          </div>
        </div>
      </div>
    </div>

    <script src="js/baguetteBox.min.js" async></script>
    <script>
      window.addEventListener("load", function () {
        // Галерея
        // Документация
        // https://github.com/feimosi/baguetteBox.js
        // Инициализация
        baguetteBox.run(".door-gallery");
      });
    </script>
  </body>
</html>
